.l_header {
  @iconW: 32px;
  @iconMargin: 4px;
  position: fixed;
  z-index: 9999;
  top: 0;
  overflow: hidden;
  width: 100%;
  font-size: @fontsize_base;
  line-height: @height_navbar;
  height: @height_navbar;
  overflow: hidden;
  font-family: @fontfamily_base;
  padding: 0 @gap;
  margin-bottom: @gap;
  .wrapper{
    padding: auto @gap;
    max-width: @width_container;
    margin: auto;
    .enable-trans();
  }
  &.no_sidebar{
    .wrapper{
      max-width: @on_pad;
      margin: auto;
    }
  }
  .wrapper.sub{
    .enable-trans();
    transform: translateY(-@height_navbar);
    .logo{
      // padding-left: 0;
      @media(max-width: @on_phone){
        .enable-trans();
        padding-left: @gap;
        padding-right: 0;
        font-size: @fontsize_base;
      }
    }
  }
  .nav--main,.nav-sub{
    height: @height_navbar;
  }
  background: @color_bg_navbar;
  &.hide{
    transform: translateY(100px) scale(0);
  }
  &.show{
    transform: translateY(0) scale(1);
  }
  &, a{
    .txt-ellipsis;
    height: @height_navbar;
    line-height: @height_navbar;
    color: @color_text_in_header;
  }
  &:extend(.z-depth-nav); // 适合深色导航栏背景

  .enable-trans();
  &:hover {
    // &:extend(.z-depth-nav-raised);
  }
  &:active {

  }
  .logo {
    padding: 0 @gap;
    line-height: @height_navbar;
    font-size: @fontsize_logo;
    font-family: @fontfamily_logo;
    @media(max-width: @on_phone){
      // flex: auto;
    }
    &.img{
      padding: 0 @gap 0 0;
    }
    img{
      padding: 0;
      height: 100%;
    }
    letter-spacing: 0;
  }

  .nav-sub{
    .logo {
      font-size: @fontsize_base;
      font-family: @fontfamily_base;
      @media(max-width: @on_phone){
        letter-spacing: -0.5px;
        padding-top: 1px;
      }

    }
  }
  .menu{
    position:relative;
    flex: 1 0 auto;
    height: @height_navbar;
    .enable-trans();
    margin:0 @gap;
    ul > li > a{
      .enable-trans();
      display: block;
      font-size: @fontsize_base;
      color: fade(@color_text_in_header, 70%);
      padding: 0 8px;
      &:hover{
        color: @color_text_in_header;
        border-bottom: @loading_height solid @theme_cardbg;
        background: fade(@theme_cardbg, 10%);
      }
      &:active,&.active{
        color: @color_text_in_header;
        border-bottom: @loading_height solid @theme_cardbg;
      }
    }
    @media(max-width: @on_phone){
      display:none;
    }
  }
  .switcher{
    display: none;
    font-size: @fontsize_base;
    line-height: @height_navbar;

    & > li{
      height: @height_navbar - @gap;
      .enable-trans();
      margin: 2px;
      @height: @height_navbar - @gap;
      @media(max-width: @on_phone){
        margin: 0;
        height: @height;
      }
      a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: @height;
        height: @height;
        border-radius: 100px;
        .enable-trans();
        &:hover {
          background: fade(@theme_cardbg, 30%);
        }
        @media(max-width: @on_phone){
          width: @iconW;
          height: @height;
        }
      }
    }
    @media(max-width: @on_phone){
      display: flex;
      padding-left: @gap/2;
      padding-right: @gap - 6px;
    }
  }
  .nav-sub .switcher{
    display: flex;
  }
  .m_search {
    position: relative;
    display: flex;
    width: @width_sidebar;
    height: @height_navbar;
    @media(max-width: @on_desktop){
      width: @width_sidebar_m;
    }
    .form {
      position: relative;
      display: block;
      width: 100%;
      margin: auto;
    }
    .icon,.input{
      .enable-trans(.3s);
    }
    .icon {
      position: absolute;
      display: block;
      line-height: @height_searchbar;
      height: @height_searchbar;
      width: @iconW;
      top: 0;
      left: @iconMargin+1px;
      font-size: @fontsize_base;
      color: fade(@color_text_in_header, 60%);
    }
    .input {
      display: block;
      font-size: @fontsize_base;
      line-height: @fontsize_base;
      height: @height_searchbar;
      width: 100%;
      color: fade(@color_text_in_header, 60%);
      box-shadow: none;
      box-sizing: border-box;
      -webkit-appearance: none;
      padding-left: @iconW + @iconMargin;
      @media(max-width: @on_phone){
        padding-left: @iconW + @iconMargin;
      }
      border-radius: @border_radius_searchbar;
      background: fade(@theme_cardbg, 15%);
      border: 1px dashed transparent;
      .set-placeholder({
        padding-top: 2px;
        color: fade(@color_text_in_header, 60%);
      });
      &:hover{
        color: @color_text_in_header;
        border: 1px solid fade(@color_text_in_header, 60%);
      }
      &:focus {
        ~.icon{
          color: @color_text_in_header;
        }
        color: @color_text_in_header;
        border: 1px solid @color_text_in_header;
      }
    }
  }
  &.pure{
    background: @theme_cardbg;
    &, a{
      color: @theme_main;
    }
    box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
    // box-shadow: none;
    // background: transparent;
    // .wrapper{
    //   background: @theme_cardbg;
    //   box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
    // }
    .menu{
      ul > li > a{
        .enable-trans();
        color: fade(@color_text_main, 70%);
        &.current{
          border-bottom: @loading_height solid fade(@theme_main, 80%);
        }
        &:hover{
          color: @theme_main;
          border-bottom: @loading_height solid @theme_main;
          background: fade(@theme_main, 10%);
        }
        &:active,&.active{
          color: @theme_main;
          border-bottom: @loading_height solid @theme_main;
        }
      }
    }
    .switcher{
      & > li{
        a{
          &:hover {
            background: fade(@theme_main, 15%);
          }
        }
      }
    }
    .m_search {
      .icon{
        color: fade(@color_text_main, 60%);
      }
      .input {
        color: @color_text_main;
        background: @theme_background;
        .set-placeholder({
          color: fade(@color_text_main, 60%);
        });
        &:hover{
          ~.icon{
            color: fade(@theme_main, 80%);
          }
          border: 1px solid fade(@theme_main, 60%);
        }
        &:focus {
          ~.icon{
            color: @theme_main;
          }
          color: @color_text_main;
          background: fade(@theme_main, 15%);
          border: 1px solid @theme_main;
        }
      }
    }
  }
  @media (max-width: @on_phone)  {
    padding: 0;
    .m_search{
      width:0;
      overflow: hidden;
      position: absolute;
      .enable-trans();
      margin: 0 @gap/2;
    }
    &.z_search-open{
      .logo{
        opacity:0;
      }
      .m_search{
        width: ~"calc(100vw - 2*@{gap} - 2*@{iconW})";
      }
    }
  }
}

.menu-phone{
  .header{
    border-top-left-radius: @border_radius;
    border-top-right-radius: @border_radius;
    background-color: fade(@color_bg_navbar,90%);
    color: @color_text_in_header;
    font-size: @fontsize_base;
    line-height: 1.8em;
    padding: 8px @gap+6px;
  }
  position: fixed;
  top: @height_navbar + @gap;
  right: 0;
  z-index:9999 + 1;
  line-height: 2 * @gap;
  background: white;
  border-right: 0;
  box-shadow: @boxshadow_card_raised;
  border-radius: @border_radius;
  transform: translate3d(-40px, -40px, 0) scale(0,0);
  transform-origin: right top;
  .enable-trans();
  &:hover {
    box-shadow: @boxshadow_card_raised;
  }
  &:active {
    box-shadow: @boxshadow_card_normal;
  }
  nav {
    padding: @gap/2 0px;
    .nav {
      height: @height_cell;
      line-height: @height_cell;
      position: relative;
      display: block;
      color: @black;
      padding: 2px 20px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      &:hover,&.active{
        border-left: 4px solid @theme_main;
        background: fade(@theme_main, 10%);
      }
    }
  }
}
.cover-wrapper{
  .l_header{
    .enable-trans(0.5s);
    transform: translateY(-1.5*@height_navbar);
    &.show{
      transform: translateY(0);
    }
  }
}
